﻿@page "/components/timepicker"

<DocsPage>
    <DocsPageHeader Title="Time Picker">
        <Description>Provides the user with a simple way to select time.</Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Basic Usage">
                <Description>
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">Note: Always use the two-way binding <CodeInline>@@bind-Time</CodeInline> to bind to a field of type <CodeInline>TimeSpan?</CodeInline></MudAlert>
                    <MudText Class="py-6">
                        If <CodeInline>AutoClose</CodeInline> is set to true and PickerActions are defined, the hour and the minutes can be selected and the drop-down will close without having to click any of the action buttons.
                        If <CodeInline>ReadOnly</CodeInline> is set to true, the TimePicker can be used but the value will remain unchanged regardless of the actions performed or the values entered.
                    </MudText>
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <TimePickerBasicUsageExample />
            </SectionContent>
            <SectionSource Code="TimePickerBasicUsageExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Dialog Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <TimePickerDialogExample />
            </SectionContent>
            <SectionSource Code="TimePickerDialogExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Static Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TimePickerStaticExample />
            </SectionContent>
            <SectionSource Code="TimePickerStaticExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Open to Minutes">
                <Description>By default, MudTimePicker opens the hours editor and then switches into the minutes editor. By setting <CodeInline>OpenTo="OpenTo.Minutes"</CodeInline>, it will open the minutes editor instead.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <TimePickerViewsExample />
            </SectionContent>
            <SectionSource Code="TimePickerViewsExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Edit Mode">
                <Description>By setting the <CodeInline>TimeEditMode</CodeInline>, you can restrict editing of the time value to allow only changing hours or minutes.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <TimePickerTimeEditModeExample />
            </SectionContent>
            <SectionSource Code="TimePickerTimeEditModeExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Colors">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true" Class="demo-datetime-margin">
                <TimePickerColorExample />
            </SectionContent>
            <SectionSource Code="TimePickerColorExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Elevation">
                <Description>You can change the elevation with the <CodeInline>Elevation</CodeInline> parameter. The default value is 0 for static and 8 for inline.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true" Class="demo-datetime-margin">
                <TimePickerElevationExample />
            </SectionContent>
            <SectionSource Code="TimePickerElevationExample" GitHubFolderName="TimePicker" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>